import React,{useEffect} from 'react'

import { NavBar,ActionBar } from 'react-vant'
import { useNavigate,useParams,useLocation } from 'react-router-dom'
import {useDispatch,useSelector} from 'react-redux'
import * as api from '../api/index'
import { CartO, ChatO, Star } from '@react-vant/icons';


function Detail() {
  const navigate =useNavigate();
  const params =useParams();
  const dispatch =useDispatch();
  const location=useLocation();
  //获取id
  console.log(params.id)
  console.log(location)
  useEffect(()=>{
    dispatch(api.getDetail(params.id))
  },[dispatch])

  const datest = location.state;
    //加入购物车
  const addShop=()=>{
    console.log(datest)
    dispatch(api.addShop(params.id))
  }

  const setLike=(ids)=>{
    dispatch( api.setLike(ids))
  }
  return (
    <div>
      <NavBar title={'详情页面'} onClickLeft={()=> navigate('/home/shou') }/>
      <img src={datest.img} alt="" />
      <p>￥{datest.price}</p>
      <p>{datest.title}</p>
      <div>
        {
          datest.tag.map((item,index)=>{
            return <div className='sons' key={index}>{item}</div>
          })
        }
      </div>
      <ActionBar>
      <ActionBar.Icon icon={<CartO color="red" />} onClick={(event)=> { addShop() }} text="购物车" badge={{ content: 5 }}   />
      <ActionBar.Icon icon={<Star color={ datest.trag ? "yellow":''} onClick={()=>{ setLike(datest.id) }} />} text="店铺" />
      <ActionBar.Button type="warning" text="加入购物车" onClick={(event)=> { addShop() }}/>
    </ActionBar>
    </div>
  )
}

export default Detail